<template>
    <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>楼宇管理</el-breadcrumb-item>
        <el-breadcrumb-item>楼宇列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图区 -->
      <el-card>

        <!-- 搜索与添加区域-->
        <el-row :gutter= "20">
          <el-col :span="9">
            <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="getBuildingLimitList">
              <el-select placeholder="请选择" v-model="queryInfo.select" slot="prepend">
                <el-option label="楼栋号" value="1"></el-option>
                <el-option label="男/女" value="2"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="getBuildingLimitList"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible = true ">添加楼栋</el-button>
          </el-col>
        </el-row>

        <!-- 楼栋列表主体区域 -->
        <el-table :data="buildingList" border stripe>
          <el-table-column align="center" type="index" label="#"></el-table-column>
          <el-table-column align="center" label="楼栋号">
            <template slot-scope="scope">
              {{scope.row.buildingNumber}}
              <span v-if="scope.row.buildingType === 1">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-nan"></use>
                </svg>
              </span>
              <span v-else>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-nv"></use>
                </svg>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="宿管人员">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.adminList">{{item.userName}}  </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="140px">
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row.buildingNumber)"  ></el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteDialog(scope.row.buildingId)" ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <!-- 添加楼栋对话框 -->
        <el-dialog
          title="添加楼栋"
          :visible.sync="addDialogVisible"
          width="50%"
          @close="addDialogClosed">
          <!-- 内容主体区 -->
          <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
            <el-form-item label="楼栋号" prop="buildingNumber">
              <el-input v-model="addForm.buildingNumber" ></el-input>
            </el-form-item>
            <el-form-item label="楼栋类别" prop="buildingType">
              <el-select placeholder="请选择" v-model="addForm.buildingType" style="width: 150px;">
                <el-option
                  v-for="item in buildings"
                  :key="item.buildingType"
                  :label="item.buildingNumber"
                  :value="item.buildingType">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 底部区域 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false" >取 消</el-button>
            <el-button type="primary" @click="addBuilding">确 定</el-button>
          </span>
        </el-dialog>

       <!-- &lt;!&ndash; 编辑楼栋信息的对话框 -->
        <el-dialog
          title="修改楼栋"
          :visible.sync="editDialogVisible"
          width="50%">
          <el-form ref="editFormRef" :model="editForm" :rules="addFormRules" label-width="100px">
            <el-form-item label="用户名" prop="buildingNumber">
              <el-input v-model="editForm.buildingNumber" disabled></el-input>
            </el-form-item>
            <el-form-item label="楼栋类别" prop="buildingType">
              <el-select placeholder="请选择" v-model="editForm.buildingType" value-key="buildingType" style="width: 150px;">
                <el-option
                  v-for="item in buildings"
                  :key="item.buildingType"
                  :label="item.buildingNumber"
                  :value="item.buildingType">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 底部区域 -->
          <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editBuilding">确 定</el-button>
        </span>
        </el-dialog>

      </el-card>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          /*获取楼宇列表的参数对象*/
          queryInfo: {
            select: '',
            query: '',
            //当前的页数
            pageNum: 1,
            //当前每页显示多少条数据
            pageSize: 10
          },
          //总记录数
          total: 0,
          /* 楼栋列表 */
          buildingList: [],
          adminName: '',
          /* 控制添加楼栋的对话框的显示/隐藏 */
          addDialogVisible: false,
          /* 添加楼栋的表单数据 */
          addForm: {
            buildingNumber: '',
            buildingType: ''
          },
          /* 添加表单的验证规则对象 */
          addFormRules: {
            buildingNumber: [
              {required: true, message: '输入楼栋号', trigger: 'blur'},
              {min: 2, max: 12, message: '长度为2-12个字符之间', trigger: 'blur'}
            ],
            buildingType: [
              {required: true, message: '请选择楼栋类型', trigger: 'blur'}
            ]
          },
          /* 控制修改楼栋的对话框的显示/隐藏 */
          editDialogVisible: false,
          /* 编辑楼栋的表单数据 */
          buildings: [
            {
              buildingType: 0,
              buildingNumber: '女生宿舍'
            },
            {
              buildingType: 1,
              buildingNumber: '男生宿舍'
            }
          ],
          editForm: {
            buildingNumber: '',
            buildingType: ''
          },
        }
      },
      /* 生命周期函数 */
      created() {
        this.getBuildingLimitList();
      },
      methods: {
        /* 获取楼宇列表数据 */
        async getBuildingLimitList() {
          const {data: res} = await this.$axios.get(this.$http+'/buildingManageController/getBuildingLimitList',{
            params: this.queryInfo
          });
          this.buildingList = res.datas.buildingList;
          this.total = res.datas.total;
          console.log(this.buildingList,this.total);
        },

        /* 监听 pageSize 改变的事件 */
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          //每次改变之后，重新获取数据
          this.getBuildingLimitList()
        },

        /* 监听 pageNum 改变的事件 */
        handleCurrentChange(newPage) {
          this.queryInfo.pageNum = newPage ;
          //每次改变之后，重新获取数据
          this.getBuildingLimitList()
        },

        /* 监听添加对话框的关闭， 对其内容进行清空 */
        addDialogClosed() {
          this.$refs.addFormRef.resetFields();
        },

        /* 添加新的楼栋 */
        addBuilding() {
          //进行表单验证
          this.$refs.addFormRef.validate(valid => {
            //如果valid为false，则直接退出
            if (!valid) return;

            //访问后台，对楼栋号进行判断是否存在
            this.$axios.get(this.$http+'/buildingManageController/checkBuildingNumber?buildingNumber=' + this.addForm.buildingNumber).then(res => {
              if(res.data.code !== 200)
                return this.$message.warning("该楼栋号已存在")
              else {
                //发送添加请求
                  this.$axios.post(this.$http+'/buildingManageController/addBuilding', this.addForm, {
                    headers: {
                      'Content-Type': 'application/json'
                    }
                  }).then(res => {
                    if (res.data.code === 200)
                      this.$message.success("添加楼栋成功！");
                    else if (res.data.code === 100 )
                      this.$message.error("添加楼栋失败！");
                    //隐藏添加对话框
                    this.addDialogVisible = false;
                    //刷新楼栋列表
                    this.getBuildingLimitList();
                  }).catch(err => {
                    console.log("异常错误",err)
                  })
              }
            }).catch(err => {
              console.log("异常错误",err)
              return this.$message.error("异常错误")
            })
          })
        },

        /* 展示编辑楼栋的对话框 */
        async showEditDialog(buildingNumber) {
          console.log(buildingNumber)
          // 发送网络请求，获取当前楼栋信息
          const {data: res} = await this.$axios.get(this.$http+'/buildingManageController/getBuildingByNumber?buildingNumber=' + buildingNumber);
          //渲染数据到对话框
          this.editForm = res.datas.buildingInfo;
          //显示编辑对话框
          this.editDialogVisible = true
        },

        /* 提交需要编辑的表单数据 */
        async editBuilding() {
          //发送网络put请求
          await this.$axios.put(this.$http+'/buildingManageController/editBuildingByNumber', this.editForm,
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
          ).then(res => {
            if (res.data.code === 200)
              this.$message.success("修改用户信息成功！");
            else if (res.data.code === 100)
              this.$message.warning("修改用户信息失败！");
            //隐藏添加用户对话框
            this.editDialogVisible = false;
            //刷新宿管列表
            this.getBuildingLimitList();
          }).catch(err => {
            console.log("异常错误",err);
            return this.$message.error("异常错误！")
          })
        },

        /* 删除楼栋信息  */
        async deleteDialog(buildingId) {
          //弹框是否确认删除
          const confirmResult = await this.$confirm('此操作将删除该楼栋所有信息, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err);
         if (confirmResult !== 'confirm')
           return this.$message.info("已取消删除");
         //删除请求
          this.$axios.delete(this.$http+'/buildingManageController/deleteBuilding?buildingId='+buildingId).then(res => {
            if (res.data.code === 200)
              this.$message.success("删除楼栋信息成功！");
            else if (res.data.code === 100)
              this.$message.error("删除楼栋信息失败！");
            //刷新宿管列表
            this.getBuildingLimitList();
          }).catch(err => {
            this.$message.error("后台异常，操作失败")
          })
        }

      }
    }
</script>

<style scoped lang="less">

</style>
